<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float练习二：让border线重合</title>
  </head>
  <style>
    .container {
      width: 1100px;
      height: 218px;
      /* background-color: pink; */
      margin: 0 auto;
    }

    h3 {
      /* line-height: 30px; */
    }

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      /* 
      让所有的浮动元素都能排在一行，margin-right:-10px
       */
      margin-right: -10px;
    }

    ul>li {
      width: 220px;
      height: 167px;
      /* background-color: red; */
      float: left;
      border: 1px solid #ccc;
      text-align: center;
      margin-right: -1px;
    }

    ul>li>img {
      margin-top: 20px;
    }
  </style>

  <body>
    <div class="container">
      <h3>热卖品牌</h2>
        <ul>
          <li><img src="../image/nike.jpg" alt=""></li>
          <li><img src="../image/under.jpg" alt=""></li>
          <li><img src="../image/adidas.jpg" alt=""></li>
          <li><img src="../image/s.jpg" alt=""></li>
          <li><img src="../image/newbalance.jpg" alt=""></li>
        </ul>
    </div>
  </body>

</html>